<template>
    <div class="container">
        <div class="banner">
            <img class="logo" src="../../../static/images/aaa/home_logo.png" />

            <img class="exit" title="进入系统" alt="进入系统" @click="exit" src="../../../static/images/aaa/exit.png" />
            <span v-html="companyInfo.user_name"></span>
            <img class="home" src="../../../static/images/aaa/me.png" />
            <img class="full_screen" src="../../../static/images/aaa/full_screen.png" @click="fullScreenHandler" />
        </div>
        <div class="title">
            <!-- <div class="title_text">衡智运油烟监控平台</div> -->
            <div class="title_text" v-html="companyInfo.platform_name"></div>
        </div>
        <div class="content">
            <!-- 左边 -->
            <div class="content-l-wrap">
                <div class="l-top">
                    <div class="l-top-title top_title">
                        <span>企业总数</span>
                    </div>
                    <annular-com :isReady="isReady" :allList="allList" ></annular-com>
                </div>
                <div class="l-mid">
                    <div class="l-mid-title top_title">
                        <span>净化器运行统计</span>
                    </div>
                    <horizontal-bar :isReady="isReady"></horizontal-bar>
                </div>
                <div class="l-bot">
                    <div class="l_bot_title top_title">
                        <span>净化器清洗统计</span>
                    </div>
                    <vertical-bar :isReady="isReady"></vertical-bar>
                </div>
            </div>
            <!-- 中间 -->
            <div class="content-mid-wrap">
                <div class="content-mid-wrap-t">
                    <div class="content_data_list">
                        <div class="content_data_item" v-for="(item, index) in statusList" :key="index" >
                            <div class="content_data_item_status" v-html="item.name[0] + ' ' + item.name[1]" ></div>
                            <div :class="[ 'content_data_item_val', statusGradientColor[index], ]" >
                                <div class="content_data_item_val_num">
                                    <span v-for="( sub_item, sub_index ) in item.val.split('')" >
                                        <i :data-num="sub_item" ref="numberItem" >0123456789</i >
                                    </span>
                                </div>
                                <div class="content_data_item_unit" v-if="false" > 家 </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content-mid-wrap-m">
                    <map-city @mapReady="mapReady"></map-city>
                </div>
                <div class="content-mid-wrap-b" v-if="mapTipShow">
                    <div class="map_tip" ref="map_tip">
                        <div :class="'map_tip_title '+ currentChosenSpot.class">
                            <!-- <p data-status="超 标">杭州老板电器股份有限公司</p> -->
                            <p :data-status="currentChosenSpot.status" v-html="currentChosenSpot.name"></p>
                        </div>
                        <div class="map_tip_info">
                            <div class="map_tip_info_l">
                                <div class="map_tip_info_detail addr">
                                    <!-- 地&nbsp;&nbsp;点: XXXXXXXXX -->
                                    地&nbsp;&nbsp;点: {{currentChosenSpot.addr}}
                                </div>
                                <div class="map_tip_info_detail addr_code">
                                    <!-- 编&nbsp;&nbsp;码: 0-0-0-0-0-0-0 -->
                                    编&nbsp;&nbsp;码: {{currentChosenSpot.code}}
                                </div>
                                <div class="map_tip_info_detail phone">
                                    <!-- 电&nbsp;&nbsp;话: 12345678910(东圃靓仔) -->
                                    电&nbsp;&nbsp;话: {{currentChosenSpot.phone}}
                                </div>
                            </div>
                            <div class="map_tip_info_r">
                                <div class="map_tip_info_detail size">
                                    <!-- 规&nbsp;&nbsp;模: 大 -->
                                    规&nbsp;&nbsp;模: {{currentChosenSpot.size}}
                                </div>
                                <div class="map_tip_info_detail category">
                                    <!-- 菜&nbsp;&nbsp;系: 粤菜 -->
                                    菜&nbsp;&nbsp;系: {{currentChosenSpot.category}}
                                </div>
                                <div class="map_tip_info_detail level">
                                    <!-- 监控级别: 重点 -->
                                    监控级别: {{currentChosenSpot.level}}
                                </div>
                            </div>
                        </div>
                        <div class="map_tip_info_item_list">
                            <div class="map_tip_info_item">
                                <img class="map_tip_info_item_icon" src="../../../static/images/aaa/icon_1.png" />
                                <div class="map_tip_info_item_status">
                                    <div class="map_tip_info_item_status_val" :style="{color:currentChosenSpot.soot>1?'orangered':'#50fa7b'}">
                                        {{currentChosenSpot.soot}}mg/m³
                                    </div>
                                    <div class="map_tip_info_item_intro"> 油烟浓度 </div>
                                </div>
                            </div>
                            <div class="map_tip_info_item">
                                <img class="map_tip_info_item_icon" src="../../../static/images/aaa/icon_2.png" />
                                <div class="map_tip_info_item_status">
                                    <div class="map_tip_info_item_status_val" :style="{color:currentChosenSpot.keliwu>5?'orangered':'#50fa7b'}">
                                        {{currentChosenSpot.keliwu}}mg/m³
                                    </div>
                                    <div class="map_tip_info_item_intro"> 颗粒物浓度 </div>
                                </div>
                            </div>
                            <div class="map_tip_info_item">
                                <img class="map_tip_info_item_icon" src="../../../static/images/aaa/icon_3.png" />
                                <div class="map_tip_info_item_status">
                                    <div class="map_tip_info_item_status_val" :style="{color:currentChosenSpot.feijiawan>10?'orangered':'#50fa7b'}">
                                        {{currentChosenSpot.feijiawan}}mg/m³
                                    </div>
                                    <div class="map_tip_info_item_intro"> 非甲烷总烃 </div>
                                </div>
                            </div>
                            <div class="map_tip_info_item">
                                <img class="map_tip_info_item_icon" src="../../../static/images/aaa/icon_4.png" />
                                <div class="map_tip_info_item_status">
                                    <div class="map_tip_info_item_status_val" :style="{color:currentChosenSpot.jiankongyi!='在线'?'orangered':'#50fa7b'}">
                                        {{currentChosenSpot.jiankongyi}}
                                    </div>
                                    <div class="map_tip_info_item_intro"> 监控仪状态 </div>
                                </div>
                            </div>
                            <div class="map_tip_info_item">
                                <img class="map_tip_info_item_icon" src="../../../static/images/aaa/icon_5.png" />
                                <div class="map_tip_info_item_status">
                                    <div class="map_tip_info_item_status_val" :style="{color:currentChosenSpot.jinghuaqi!='开启'?'orangered':'#50fa7b'}">
                                        {{currentChosenSpot.jinghuaqi}}
                                    </div>
                                    <div class="map_tip_info_item_intro"> 净化器状态 </div>
                                </div>
                            </div>
                            <div class="map_tip_info_item">
                                <img class="map_tip_info_item_icon" src="../../../static/images/aaa/icon_6.png" />
                                <div class="map_tip_info_item_status">
                                    <div class="map_tip_info_item_status_val" :style="{color:currentChosenSpot.fengshan!='开启'?'orangered':'#50fa7b'}">
                                        {{currentChosenSpot.fengshan}}
                                    </div>
                                    <div class="map_tip_info_item_intro"> 排风机状态 </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 右边 -->
            <div class="content-r-wrap">
                <div class="content-r-wrap-t">
                    <div class="top_title">
                        <span>超标企业报警</span>
                    </div>
                    <exceed-com :isReady="isReady"></exceed-com>
                </div>
                <div class="content-r-wrap-m">
                    <div class="top_title">
                        <span>超标趋势图</span>
                    </div>
                    <div class="_unit">单位: 家</div>
                    <exceed-line :isReady="isReady"></exceed-line>
                </div>
                <div class="content-r-wrap-b">
                    <div class="top_title">
                        <span>各区域日超标统计</span>
                    </div>
                    <div class="show_more" v-if="false">查看更多>></div>
                    <bar-chart :isReady="isReady"></bar-chart>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import AnnularCom from "@/components/AAAScreen/charts/Annular"; // 环形饼状图
import HorizontalBarCom from "@/components/AAAScreen/charts/HorizontalBar"; // 横向柱状图
// 目前使用的echarts版本不支持3D柱状图, 以后再研究
// import Bar3DCom from '@/components/AAAScreen/charts/Bar3DChart' // 3D柱状饼图
import VerticalBar from "./charts/VerticalBar"; // 立体柱状图
import BaiduMap from "./charts/BaiduMap"; // 百度地图
import ExceedLineCom from "@/components/AAAScreen/charts/LineChart"; // 线性图
import BarChartCom from "@/components/AAAScreen/charts/BarChart"; // 立体柱状图
import ExceedCom from "@/components/AAAScreen/charts/ExceedCom"; // 超标列表模块

// import FlipNum from '@/components/AAAScreen/charts/Flip'
import { overStandardRealTime } from '@/api/api'
export default {
    name: "AAA",
    data () {
        return {
            isFull: false, //是否全屏
            show: false,
            mapTipShow: false,
            statusGradientColor: ["blue", "green", "orange", "red", "gray"], // 不同状态指标的颜色
            statusList: [
                { name: "全部", val: "0492" },
                { name: "正常", val: "0060" },
                { name: "预警", val: "0020" },
                { name: "超标", val: "0010" },
                { name: "离线", val: "0010" },
            ],
            isReady: false,//地图是否加载完成
            overStandardList: [],
            allList: [],
            currentChosenSpot:null, // 当前地图上选中的点,
            companyInfo: { // 登陆信息以及企业信息
                user_name: "",
                platform_name: ""
            },
        };
    },
    components: {
        "annular-com": AnnularCom, // 环形饼状图
        "horizontal-bar": HorizontalBarCom, // 横向柱状图
        // 'bar-3d': Bar3DCom, // 3D柱状饼图
        "vertical-bar": VerticalBar, // 立体柱状图
        "map-city": BaiduMap, // 百度地图
        "exceed-line": ExceedLineCom, // 线性图
        "bar-chart": BarChartCom, // 立体柱状图
        "exceed-com": ExceedCom // 超标列表
    },
    created () {
        // this.companyInfo = JSON.parse(localStorage.getItem("companyInfo"))||null;
        let _companyInfo = JSON.parse(localStorage.getItem("companyInfo"));
        _companyInfo ? this.companyInfo = _companyInfo : console.log("未能成功获取用户信息");

        //  判断点击事件是否在map_tip上
        document.addEventListener("click", (event) => {
            const e = event || window.event;
            // console.log(e.target.className);
            // if (e.target.className == "pin" || e.target.className == "pulse") {
            if (e.target.className.indexOf("BMap_Marker")>-1) {
                this.mapTipShow = true;
                return;
            }
            if (this.$refs.map_tip && !this.$refs.map_tip.contains(e.target)) {
                // console.log('not in myDiv')
                this.mapTipShow = false;
            }
        });

        this.getoverStandardRealTime()

    },
    methods: {
        getoverStandardRealTime () {   //获取超标报警列表
            overStandardRealTime()
                .then((res) => {
                    if (res.status == 200 && res.data.code == 2000) {
                        this.overStandardList = res.data.list.list
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },

        mapReady (allList) {
            this.isReady = true
            this.allList = allList
            /* 过滤出statusList */
            let _all = { name:'全部', val: this.PrefixInteger(allList.length,4) };
            let _warn = { 
                name:'预警', 
                val:this.PrefixInteger(allList.filter(v=>{
                    return Number(v.soot)>0.8&&Number(v.soot)<=1
                }).length,4)
            }
            let _exceed = { 
                name:'超标', 
                val:this.PrefixInteger(allList.filter(v=>{
                    return Number(v.soot)>1
                }).length,4)
            }
            let _offline = { 
                name:'离线', 
                val:this.PrefixInteger(allList.filter(v=>{
                    return v.monitoring_status==0
                }).length,4)
            }
            let _normal = { 
                name:'正常', 
                val:this.PrefixInteger(allList.length - Number(_warn['val'])-Number(_exceed['val'])-Number(_offline['val']),4)
            }
            this.statusList = []
            this.statusList.push(_all)
            this.statusList.push(_normal)
            this.statusList.push(_warn)
            this.statusList.push(_exceed)
            this.statusList.push(_offline)
        },

        PrefixInteger(num, length) { // 补零算法
            return (Array(length).join('0') + num).slice(-length);
        },

        exit () {
            //退出登陆
            localStorage.clear();
            location.href = 'http://www.flying-yun.com/Management/index.html';
        },

        fullScreenHandler () {
            const de = document.documentElement;

            if (!this.isFull) {
                if (de.requestFullscreen) {
                    de.requestFullscreen();
                }
                if (de.mozRequestFullScreen) {
                    de.mozRequestFullScreen();
                }

                if (de.webkitRequestFullScreen) {
                    de.webkitRequestFullScreen();
                }
                this.isFull = true

            } else {

                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                }

                this.isFull = false

            }
        },
        fixedNumber (num) { // 数字千分位
            return Number(num)
                .toFixed(2)
                .replace(/(\d)(?=(\d{3})+\.)/g, "$1,"); //.split(".")[0];
        },
        compare (prop) {
            // 排序
            return function (a, b) {
                var v1 = a[prop];
                var v2 = b[prop];
                return v1 - v2;
            };
        },
        groupBy (array, f) {
            // js实现groupby算法
            let groups = {};
            array.forEach(function (o) {
                let group = JSON.stringify(f(o));
                groups[group] = groups[group] || [];
                groups[group].push(o);
            });
            return Object.keys(groups).map(function (group) {
                return groups[group];
            });
        },
        fixedForm (data) {
            // json的数据格式转换
            let obj = {},
                keys = [];
            data.forEach((e) => (keys = keys.concat(Object.keys(e)))); // 先去重掉keys
            this.unique(keys).forEach((ele) => {
                obj[ele] = data.map((val) => val[ele]);
            });
            return obj;
        },
        unique (arr) {
            // 数组去重
            return arr.filter(function (item, index, arr) {
                //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
                return arr.indexOf(item, 0) === index;
            });
        },
        arrDiff (arr, arr2) {
            // 求数组差集
            return arr2.filter((i) => {
                return arr.indexOf(i) < 0;
            });
        },
    },
    beforeDestroy () {
        console.log("beforeDestroy: 页面销毁");
    },
    watch:{
        isReady(){
            // 翻牌动画延时
            setTimeout(() => {
                const numberItems = this.$refs.numberItem;
                numberItems.forEach((v, i) => {
                    let numIndex = v.getAttribute("data-num");
                    v.style.transform = `translateY(-${parseInt(numIndex) * 10}%)`;
                });
            }, 3000);
        }
    }
};
</script>

